<template>
	<div>
		<h2 class="remd_tl">最新音乐</h2>
		<div class="remd_newsg" v-for="item in latestmusicList" @click="jump(item.id)">
			<div class="m-sgitem">
				<div class="sgfr f-bd f-bd-btm">
					<div class="sgchfl">
						<div class="f-thide sgtl">
							{{item.name}}
							<span class="sgalia">{{item.song.alias[0]}}</span>
						</div>
						<div class="f-thide sginfo" v-if="item.song.artists.length==1">
							<i class="u-hmsprt sghot" v-if="item.song.privilege.maxbr>320000"></i>
							{{item.song.artists[0].name}}-
							{{item.name}}
						</div>
						<div class="f-thide sginfo" v-if="item.song.artists.length==2">
							<i class="u-hmsprt sghot" v-if="item.song.privilege.maxbr>320000"></i>
							{{item.song.artists[0].name}}
							/{{item.song.artists[1].name}}
							-{{item.name}}
						</div>
						<div class="f-thide sginfo" v-if="item.song.artists.length==3">
							<i class="u-hmsprt sghot" v-if="item.song.privilege.maxbr>320000"></i>
							{{item.song.artists[0].name}}
							/{{item.song.artists[1].name}}
							/{{item.song.artists[2].name}}
							-{{item.name}}
						</div>
						<div class="f-thide sginfo" v-if="item.song.artists.length==4">
							<i class="u-hmsprt sghot" v-if="item.song.privilege.maxbr>320000"></i>
							{{item.song.artists[0].name}}
							/{{item.song.artists[1].name}}
							/{{item.song.artists[2].name}}
							/{{item.song.artists[3].name}}
							-{{item.name}}
						</div>
					</div>
					<div class="sgchfr"><span class="u-hmsprt sgchply"></span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			latestmusicList:null,
		},
		methods:{
		jump(id){
			this.$router.push({
	  			path:`/play/${id}`, 
			})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	
	.remd_tl {
		position: relative;
		padding-left: r(18px);
		margin-bottom: r(28px);
		font-size: r(34px);
		height: r(40px);
		line-height: r(40px);
		font-weight: 400;
	}
	
	.remd_tl:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: r(-18px);
		width: r(4px);
		height: r(32px);
		background-color: #d33a31;
	}
	.remd_newsg{
		position: relative;
    	min-height: r(40px);
    	.m-sgitem{
    		display: flex;
    		color: #333;
    		padding-left: r(20px);
    		cursor: pointer;
    		.sgfr{
    			border-bottom: r(2px) solid rgba(0,0,0,.1);
    			flex: 1 1 auto;
    			display: flex;
    			position: relative;
    			.sgchfl{
    				padding: r(17px) 0;
    				width: 0;
    				flex: 1 1 auto;
    				.f-thide{
    					overflow: hidden;
					    text-overflow: ellipsis;
					    white-space: nowrap;
					    word-break: normal;
    				}
    				.sgtl{
    					font-size: r(34px);
    					.sgalia{
    						color: #888;
    						margin-left: r(8px);
    					}
    				}
    				.sginfo{
    					font-size: r(24px);
    					color: #888;
    					.sghot{
    						display: inline-block;
						    width: r(24px);
						    height: r(16px);
						    margin-right: r(8px);
    					}
    					.u-hmsprt {
						    background: url(https://s3.music.126.net/m/s/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880) no-repeat;
						    background-size: r(332px) r(194px);
						}
    				}
    			}
    			.sgchfr{
    				display: flex;
    				align-items: center;
    				padding: 0 r(20px);
    				.sgchply {
					    display: inline-block;
					    width: r(44px);
					    height: r(44px);
					}
					.u-hmsprt {
					    background: url(https://s3.music.126.net/m/s/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880) no-repeat;
					    background-size: r(332px) r(194px);
					    background-position: r(-48px) 0;
					}
    			}
    		}
    	}
	}
</style>